<div class="layui-card-header SearchTable">
    测试代码：<span id="detail_name_str" class="color_green">表格高级搜索，右侧抽屉</span>
</div>
<div class="layui-card-body">
<pre class="layui-code" lay-title="高级搜索按钮代码" lay-height="" lay-skin="" lay-encode="true" about="false">
<button class="layui-btn btn-search-adv layui-btn-sm" lay-event="DoSearchMore">高级搜索</button>
</pre>

    <pre class="layui-code" lay-title="JS代码" lay-height="" lay-skin="" lay-encode="true" about="false">
  layui.use(['drawer'], function () {
        drawer1 = layui.drawer.render({
            title: '<b><i class="layui-icon layui-icon-app"></i> 高级搜索</b>', offset: 'r', width: "300px",
            content: SearchMoreTemp.innerHTML,
            btn: ['<i class="layui-icon layui-icon-app"></i>搜索', '重置'],
            success: function (layero, index) {
                //渲染搜索中的日期或选择
                layui.laydate.render({
                    elem: '#d_title1'
                });
                layui.form.render('select');
            },
            btn1: function (index, layero) {
                tableindex.reload({
                    where: {
                        s: {
                            m_id: $(layero).find("#d_title1").val(),//取值
                        }
                    }
                    , page: {curr: 1}
                });
            },
            btn2: function (index, layero) {
                $(layero).find("form")[0].reset();//重置
                return false;
            }
        });
</pre>
    <pre class="layui-code" lay-title="高级搜索代码示例" lay-height="" lay-skin="" lay-encode="true" about="false">
 <script type="text/template" id="SearchMoreTemp">
     <form class="layui-form">
         <div class="layui-row margin-10" style="z-index:2000">
             <label class="layui-form-label-col">测试标题</label>
             <select id="test_type" name="test_type" lay-filter="testtype" style="width:80px">
                 <option value='' class='select-option-default'></option>
                 <option value="101">食品</option>
                 <option value="102">百货</option>
             </select>

         </div>
         <div class="margin-10">
             <input type="text" id="d_title" placeholder="请输入标题" autocomplete="off" class="layui-input">
         </div>
         <div class="margin-10">
             <input type="text" id="d_title1" placeholder="请选择时间" autocomplete="off" class="layui-input">
         </div>
         <div class="layui-form-item margin-10">
             <label class="layui-form-mid">价格</label>

             <div class="layui-input-inline" style="width:70px">
                 <input type="text" name="price_now" lay-verify="number" placeholder="优惠价格"
                        value="" class="layui-input">

             </div>
             <label class="layui-form-mid">-</label>

             <div class="layui-input-inline" style="width:70px">
                 <input type="text" name="price_base" lay-verify="number" placeholder="商品原价"
                        value="" class="layui-input">
             </div>
         </div>
     </form>
 </script>
</pre>
<pre class="layui-code" lay-title="高级搜索按钮调用JS" lay-height="" lay-skin="" lay-encode="true" about="false">
        layui.util.event("lay-event", {
            DoSearch: function () {
                tableindex.reload({
                    where: {s: {test_id: $("#test_id").val(), test_name: $("#test_name").val()}}, page: {curr: 1}
                });
            }
            , DoSearchMore: function () {
                layui.form.render();
                drawer1.open();
            }
        });
  </pre>

</div>